<template>
  <div class="contain">
    <span class="search">
      <select id="111" class="select" ref="type">
        <option v-for="item in type" :value="item">{{ item }}</option>
      </select>
    </span>
    <span class="search">
        <input type="text" ref="text">
    </span>
    <span class="search">
      <Item @active="search"><img src="../assets/search.png" alt="" style="width: 10px;height: 10px">搜索</Item>
    </span>
  </div>
</template>

<script>
import Item from "@/components/Item";

export default {
  name: "SearchText",
  props: {
    name: "",
    type: {
      type: Array,
    }
  },
  components: {
    Item,
  },
  methods: {
    search() {
      var index = this.$refs.type.selectedIndex;
      var value = this.$refs.text.value;
      this.$emit('search', index, value);
    }
  }
}
</script>

<style scoped>

.contain {
  width: 220px;
  height: 50px;
  /*background-color: #7c96d0;*/
}

.search {
  float: left;
  margin-left: 1px;
  font-size: 10px;
  font-weight: bold;
  font-family: SimSun;;
}

.select {
  width: 80px;
  height: 23px;
  background-color: #f1f1f1;
  border: 0;
}
</style>